<template>
  <div :style="{ width: lwidth == 'auto' ? '100%' : lwidth + 'px' }">
    <!-- 如果对象的键有特殊符号“-”等等，那么要用引号括起来。 -->
    <div class="title row">
      <div class="bookType">{{ lable }}</div>
      <div class="more">更多</div>
    </div>

    <div class="main" ref="bookmain">
      <div
        v-for="(item, index) in newList"
        :class="['booklist', colNum == 4 ? 'col4' : 'col5']"
        :key="item.bookName + index"
        @click="toInfo(item.bookId)"
      >
        <div class="imgB center">
          <img
            class="bookImg"
            :src="`${url}` + `${item.coverPhoto}`"
            :alt="item.bookName"
          />
        </div>
        <div class="bookname" v-html="item.bookName"></div>
        <div class="ra">
          <i class="through">{{ item.fprice }}</i
          ><i class="price">￥{{ item.price }}</i>
        </div>
        <div class="cl ra">
          <div class="BB">
            <i class="hovers el-icon-star-off"></i>
          </div>
          <div class="BB">
            <i class="hovers el-icon-shopping-cart-2"></i>
          </div>
          <div class="BB">
            <i class="hovers buy">购买</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookType: "好书推荐",
      url: localStorage.getItem("url"),
      // newList: [],
    };
  },
  props: ["lwidth", "colNum", "bookList", "lable"],
  mounted() {
    // if(this.lwidth=='auto'){
    //   this.lwidth=100%;
    // }
    if (this.lable) {
      this.bookType = this.lable;
    }
  },
  computed: {
    newList() {
      if (this.colNum) {
        return this.bookList.slice(0, this.colNum * 2);
      } else {
        return this.bookList;
      }
    },
  },
  methods: {
    toInfo(bookId) {
      console.log("toInfo -> bookId:", bookId);
      this.$router.push({ path: "/details", query: { bookId: bookId } });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  padding: 20px;
  border-bottom: 1px solid lightslategray;
  .bookType {
    font-size: 20px;
    font-weight: 600;
  }
  .bookType::after {
    content: " /";
  }
  .more {
    font-size: 16px;
    font-weight: 400;
    color: lightseagreen;
    margin-top: 4px;
    margin-left: 14px;
  }
}

.main {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  .booklist:hover {
    background: lightblue;
    border-color: aqua;
  }
  .col4 {
    width: 24%;
  }
  .col5 {
    width: 18%;
  }
  .booklist {
    text-align: center;
    margin-top: 20px;
    min-width: 120px;
    height: 200px;
    background: rgb(236, 234, 234);
    border: 1px solid lightslategray;
    .imgB {
      // width: 140px;
      height: 120px;
      // padding: 10px;
      // background: rgb(238, 132, 132);
      .bookImg {
        max-width: 120px;
        max-height: 120px;
      }
    }
    .bookname {
      text-overflow: ellipsis; /* 将文本溢出显示. . . */
      overflow: hidden; /* 超出隐藏 */
      white-space: nowrap; /* 强制一行显示 */
      padding-left: 10px;
      padding-right: 10px;
      max-height: 40px;
      font-size: 10px;
      line-height: 2;
    }
    .price {
      color: red;
      line-height: 2;
    }
    .through {
      text-decoration: line-through; //删除线
      line-height: 2;
    }

    .cl {
      font-size: 12px;
      margin-top: 2px;
      .hovers:hover {
        color: red;
        font-size: 16px;
        cursor: pointer;
      }
      .BB {
        height: 16px;
        width: 40px;
      }
    }
  }
}
</style>